<template>
  <div>
    <el-row ref="rightTopHeader" class="topBarWrap rightTopHeader">
      <el-row class="title" type="flex" justify="space-between">
        <el-col type="flex">
          <el-col style="width: 26px">
            <img height="24" src="../../../assets/images/left.png"/>
          </el-col>
          <el-col align="center" style="line-height: 40px;width: 200px">三网网站命中占比</el-col>
          <el-col style="width: 26px">
            <img height="24" src="../../../assets/images/right.png"/>
          </el-col>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="18">
          <el-select
            v-model="selectValue1"
            size="small"
            @change="selectOneChanged"
          >
            <el-option :value="10" :label="'网站'"/>
            <el-option :value="20" :label="'元素'"/>
          </el-select>
          <el-select
            v-model="selectValue2"
            size="small"
            style="margin-left: 10px"
            @change="selectTwoChanged"
          >
            <el-option
              v-for="destName in destNameList"
              :label="Object.values(destName)[0]"
              :value="Object.values(destName)[0]"
            />
          </el-select>
        </el-col>
        <el-col :span="6" style="position: relative">
          <MonthWeekDay
            :dataType="dataType"
            @ClickedBtn="clickedBtn"
          />
        </el-col>
      </el-row>
    </el-row>
    <el-row class="rightTopContainer">
      <el-row type="flex">
        <el-col :span="8" class="topBarWrap pieWrap">
          <el-row class="title pieTitle">联通</el-row>
          <el-row style="height: calc(100% - 50px)">
            <PieFive
              ref="topBar"
              :chartData="chartDataOne"
            />
          </el-row>
        </el-col>
        <el-col :span="8" class="topBarWrap pieWrap" style="margin-left: 6px">
          <el-row class="title pieTitle">电信</el-row>
          <el-row style="height: calc(100% - 50px)">
            <PieFive
              ref="topBar"
              :chartData="chartDataTwo"
            />
          </el-row>
        </el-col>
        <el-col :span="8" class="topBarWrap pieWrap" style="margin-left: 6px;width: calc(33%-12px)">
          <el-row class="title pieTitle">移动</el-row>
          <el-row style="height: calc(100% - 50px)">
            <PieFive
              ref="topBar"
              :chartData="chartDataThree"
            />
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import PieFive from './PieFive'
  import MonthWeekDay from './MonthWeekDay'
  import apiUrl from '@/config'
  export default {
    name: 'TopBar',
    components: {
      PieFive,
      MonthWeekDay
    },
    data() {
      return {
        baseURL: process.env.NODE_ENV === 'production' ? apiUrl.apiUrl.devUrl : apiUrl.apiUrl.testUrl, // 生产
        chartDataOne: {
          dataList: []
        },
        chartDataTwo: {
          dataList: []
        },
        chartDataThree: {
          dataList: []
        },
        dataType: 10,
        selectValue1: 10,
        selectValue2: '全部',
        destNameList: [],
        sourceData: {},
      }
    },
    created() {
      this.getDestNameList()
      this.repeatInFive()
    },
    methods: {
      repeatInFive() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.getProbes()
        this.timer = setInterval(() => {
          this.getProbes()
        }, 1000 * 60 * 5)
      },
      clickedBtn(value) {
        this.dataType = value
        this.getProbes()
      },
      getDestNameList() {
        // window._api.apiDestName().then(res => {
        this.$axios.get(`${this.baseURL}/api/benchmarking/destNameSelectListLinkQuality`).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.destNameList = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      selectOneChanged() {
        // let keyName = ''
        // if (this.selectValue1 === '网站') {
        //   keyName = 'host_hit_rate'
        // } else if (this.selectValue1 === '元素') {
        //   keyName = 'element_hit_rate'
        // }
        // let arr1 = []
        // let arr2 = []
        // let arr3 = []
        // this.sourceData['联通'].map(item => {
        //   arr1.push({
        //     value: item[keyName],
        //     name: item.province_name
        //   })
        // })
        // this.sourceData['电信'].map(item => {
        //   arr2.push({
        //     value: item[keyName],
        //     name: item.province_name
        //   })
        // })
        // this.sourceData['移动'].map(item => {
        //   arr3.push({
        //     value: item[keyName],
        //     name: item.province_name
        //   })
        // })
        // this.chartDataOne.dataList = arr1
        // this.chartDataTwo.dataList = arr2
        // this.chartDataThree.dataList = arr3
        this.getProbes()
      },
      selectTwoChanged() {
        this.getProbes()
      },
      getProbes(){
        // window._api.apiWebHitRatio({ statisticsType: this.dataType, destName: this.selectValue2 }).then(res => {
        this.$axios.get(`${this.baseURL}/api/benchmarking/webHitRatio`, {
          params: { statisticsType: this.dataType, destName: this.selectValue2, dType: this.selectValue1 }
        }).then((response) => {
          let res = response.data
          if (res.status === 0) {
            this.sourceData = res.data
            let arr1 = []
            let arr2 = []
            let arr3 = []
            res.data['联通'].map(item => {
              arr1.push({
                value: item['hit_rate'],
                name: item.province_name
              })
            })
            res.data['电信'].map(item => {
              arr2.push({
                value: item['hit_rate'],
                name: item.province_name
              })
            })
            res.data['移动'].map(item => {
              arr3.push({
                value: item['hit_rate'],
                name: item.province_name
              })
            })
            this.chartDataOne.dataList = arr1
            this.chartDataTwo.dataList = arr2
            this.chartDataThree.dataList = arr3
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
.topBarWrap{
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 8px 0px 8px 18px;
}
.rightTopHeader{
  height: 11vh;
}
.rightTopContainer{
  margin-top: 9px;
}
.pieWrap{
  height: 30vh;
}
.title{
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-align: center;
  color: #00DDFF;
  font-weight: bold;
}
.pieTitle{
  background: linear-gradient(-113deg,#b5179e 1%,#7209b7 1%,#560bad,#480ca8,#3a0ca3,#3f37c9,#4361ee,#4895ef,#4cc9f0);
  letter-spacing: 4px;
  border: 1px solid rgba(255,255,255, .1);
  margin-right: 18px;
}
</style>
